<template>
	<div class="fm-page">
		<div class="fm-bar">
			<el-dropdown trigger="click" @command="handleCommand">
				<div class="el-dropdown-sw flex-center">
					<img :src="swIcon"><span>{{swText}}</span><i class="el-icon-arrow-down el-icon--right"></i>
				</div>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item :command="beforeHandleCommand('CN')">
						<div class="drop-flex-item">
							<img src="../../assets/images/cn.png"><span>CN</span>
						</div>
					</el-dropdown-item>
					<el-dropdown-item :command="beforeHandleCommand('EN')">
						<div class="drop-flex-item">
							<img src="../../assets/images/en.png"><span>EN</span>
						</div>
					</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</div>
		<div class="fm-main">
			<div class="fm-title">欢迎登录</div>
			<el-form ref="form" :model="form" :rules="rules">
				<div class="form-row">
					<el-form-item prop="user">
						<div class="ico iconfont icon-yonghuming"></div>
						<el-input placeholder="6-16位数字和字母组合，字母开头" v-model="form.user"></el-input>
					</el-form-item>
				</div>
				<div class="form-row">
					<el-form-item prop="pwd">
						<div class="ico iconfont icon-_mima2"></div>
						<el-input placeholder="6-16位密码，字母区分大小写" v-model="form.pwd"></el-input>
					</el-form-item>
				</div>
				<div class="form-row">
					<el-form-item prop="code">
						<div class="ico iconfont icon-yanzhengma"></div>
						<el-input placeholder="验证码" v-model="form.code"></el-input>
						<div class="form-code flex-center">
							<div class="code-box"><img src="../../assets/images/code.png"></div>
							<div class="iconfont icon-shuaxin"></div>
						</div>
					</el-form-item>
				</div>
				<div class="form-row flex-center flex-zBetween">
					<el-switch v-model="form.sw" active-text="记住账号" active-color="#00a653" inactive-color="#999">
					</el-switch>
					<router-link to="/forget">忘记密码？</router-link>
				</div>
				<div class="form-foot">
					<el-button @click="submitForm('form')" type="success">立即登录</el-button>
					<div class="form-link">
						还没有账号？<router-link to="/register">点击注册</router-link>
					</div>
				</div>
			</el-form>
		</div>
		<div class="fm-wel">
			Welcome back<br>Football
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	export default {
		name: 'Home',
		components: {},
		data() {
			return {
				swIcon: require('../../assets/images/cn.png'),
				swText: 'CN',
				form: {
					user: '',
					pwd: '',
					code: '',
					sw: true,
				},
				rules: {
					user: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}, ],
					pwd: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}, ],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					}, ],
				}
			};
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						alert('submit!');
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			handleCommand(command) {
				switch (command.command) {
					case 'CN':
						this.swIcon = require('../../assets/images/cn.png')
						this.swText = 'CN'
						break;
					case 'EN':
						this.swIcon = require('../../assets/images/en.png')
						this.swText = 'EN'
						break;
					default:
						break;
				}
			},
			beforeHandleCommand(command) {
				return {
					'command': command
				}
			},
		}
	}
</script>
